<template>
  <div style="padding-top: 300px;">
    <m-header v-scroll-header="[0, 30, 100]" ></m-header>
    <div v-scroll-bg class="bg" :style="background.bg"></div>
    <div class="main">
      <!-- <h1>Web前端</h1> -->
      <div class="topbanner">
        <!-- 焦点图轮播 -->
        <div id="boxID" class="img-roll" :style="background.topbanner">
          <div class="pic">
            <ul>
              <li><a href="#"><img src="../assets/picture/web-img/topbanner2.jpg"></a></li>
              <li><a href="#"><img src="../assets/picture/web-img/topbanner.jpg"></a></li>
            </ul>
          </div>
        </div><!-- img-roll -->
      </div>
      <div class="briefing">
        <h2>什么是Web前端工程师，发展前景怎么样</h2>
        <p>Web前端开发工程师是一个很新的职业，在国内乃至国际上真正开始受到重视的时间不超过7年，具有强烈的互联网时代特征</p>
      </div>
      <div class="banner banner1" :style="background.banner1">
        <div class="content animated">
          <h3>
            <p>互联网的建筑设计师</p>
            <p style="text-indent: 2em">美化浏览界面、提升用户体验</p>
          </h3>
          <p class="detail">
            主要职责是利用(X)HTML/CSS/JavaScript/Flash等各种Web技术进行客户端产品的开发。完成客户端程序（也就是浏览器端）的开发，开发JavaScript以及Flash模块，同时结合后台开发技术模拟整体效果，进行丰富互联网的Web开发，致力于通过技术改善用户体验。
          </p>
        </div>
      </div>
      <div class="banner banner2" :style="background.banner2">
        <div class="content animated">
          <h3>
            <p style="text-indent: 2em">比美工懂技术，比技术懂交互</p>
            <p>掌控Web前端开发全局</p>
          </h3>
          <p class="detail">
            精通页面设计，也精通前端技术；懂用户UI交互，也懂网站SEO；会开发、会调试、会后台开发语音、精通开发工具。配合后台开发人员实现产品界面和功能，完成表现层及前后端交互的架构设计和开发。这就是前端工程师，为网站的产品和服务，实现一流的Web界面。
          </p>
        </div>
      </div>
      <div class="banner banner3" :style="background.banner3">
        <div class="content animated">
          <h3>
            <p>文，可影响网站产品运营和盈利</p>
            <p style="text-indent: 2em">武，可深达网站产品设计和开发</p>
          </h3>
          <p class="detail">
            随着互联网行业的发展，web产品交互越来越复杂，用户使用体验和网站前端性能优化，这些都需要专业的前端工程师来解决。外在项目中还要弥补设计师在交互设计上的不足，前端工程师在开发过程中起着重要的承上启下的作用。 走产品运营，可发展为产品工程师、交互设计师、产品经理、产品总监……走技术研发，可发展为Web架构师、Web高级工程师、技术总监……
          </p>
        </div>
      </div>
      <img src="../assets/picture/web-img/banner4.jpg">
    </div>
    <div v-scroll-bg class="bg" :style="background.bg"></div>
  </div>
</template>

<script>
  import MHeader from './MHeader'
  import MFooter from './MFooter'
  import {Bgimg} from '../Bgimg'
    export default {
      name: "web",
      components: {
        MHeader,
        MFooter
      },
      data() {
        return {
          background: {
            bg: {
              backgroundImage: `url(${Bgimg.webbg})`
            },
            topbanner: {
              backgroundImage: `url(${Bgimg.webtopbanner})`
            },
            banner1: {
              backgroundImage: `url(${Bgimg.webbanner1})`
            },
            banner2: {
              backgroundImage: `url(${Bgimg.webbanner2})`
            },
            banner3: {
              backgroundImage: `url(${Bgimg.webbanner3})`
            }
          }
        }
      },
      mounted(){

      }
    }
</script>

<style scoped lang="stylus">
  .bg{
    width: 100%;
    height: 100vh;
    background:  no-repeat;
    background-size: cover;
    background-position: 50% 50%;
    position: fixed;
    top: 0px;
  }
  .bg-z-index{
    z-index: 100;
    background-position: top center;
  }
  .main{
    width: 1100px;
    position: relative;
    background: #efefef;
    z-index: 10;
    /*top: 300px;*/
    left: 50%;
    margin-left: -550px;
  }
  .main h1{
    position: absolute;
    font-size: 50px;
    font-family: "微软雅黑";
    height: 70px;
    line-height: 70px;
    top: -100px;
    text-align: center;
    width: 100%;
  }

  /*topbanner================*/
  .topbanner{
    width: 1100px;
    height: 330px;
    overflow: hidden;
  }
  #boxID{
    width: 100%;
    height: 330px;
  }
  .briefing h2{
    color: #069;
    font-size: 44px;
    line-height: 72px;
    text-align: center;
    font-weight: 700;
    margin: 30px 0 20px;
  }
  .briefing p{
    font-size: 16px;
    line-height: 30px;
    text-align: center;
    color: #555;
    margin-bottom: 40px;
  }
  .banner1{
    padding: 80px 40px 0 480px;
    height: 420px;
  }
  .banner2{
    padding: 80px 460px 0 40px;
    height: 360px;
  }
  .banner3{
    padding: 80px 40px 0 480px;
    height: 420px;
    /*background: url(../picture/web-img/banner3.jpg);*/
  }
  .banner h3{
    width: 350px;
    margin: 0 auto;
    font-weight: normal;
    margin-bottom: 20px;
  }
  .banner h3 p{
    color: #069;
    font-size: 20px;
    line-height: 30px;
  }
  .detail{
    text-indent: 2em;
    color: #555;
    line-height: 30px;
    font-size: 16px;
  }
  .banner{
    overflow: hidden;
    background-position: 50% 50%;
    background-size: cover;
  }

</style>
